<template>
	<view class="multiLine bg-color-index flex flex flex-ai-center flex-js-sb ">
		<view class="text-gg flex flex-ai-center flex-js-center">
			<!-- <w-icon name="new-msg" size="12"></w-icon> -->
			<!-- <w-image src="/static/icon/new-msg.png" :width="74/2" :height="40/2" radius="8"></w-image> -->
			公告
		</view>
		<view class="flex flex-dir-col" style="width: 88%;">
			<u-notice-bar :text="noticeText" :step='false' fontSize="14" direction='column' color="#222"
				duration="5000" bgColor='transparent' :speed="50" icon='' @click="viewNotice"></u-notice-bar>
		</view>
		<view @click='toFind' class="flex flex-ai-center">
			<!-- <view class="font-color-222 font-size-12 no_text mr-4 font-w-bold no_text">更多</view> -->
			<!-- <w-image src="/static/icon/more.png" :width="16/2" :height="24/2"></w-image> -->
			<!-- <u-icon name="arrow-right" size="12" color="#000"></u-icon> -->
			<w-icon name="more" size='14' @click.native='toFind'></w-icon>
		</view>
	</view> 
</template>

<script>
	import {
		getNoticeList
	} from '@/api/notice/index.js'
	export default {
		name: "w-notice",
		props: {
			styleType: {
				type: String,
				default: 'default'
			}
		},
		data() {
			return {
				noticeText: [],
				noticeList: [],
				isplay: true
			};
		},
		mounted() {
			this.getList()
		},
		watch: {
			lang(v) {
				this.getList()
			}
		},
		methods: {
			//获取列表
			getList() {
				getNoticeList().then(res => {
					this.noticeList = res.data.data;
					this.noticeText = res.data.data.map(v => this.handleLang(v.title))
				})
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			toFind() {
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			},
			//查看公告
			viewNotice(index) {
				let {
					type,
					url,
					id
				} = this.noticeList[index]
				if (type == 2 && url) {
					if (url.includes('mp.weixin.qq.com')) {
						//#ifdef APP
						plus.runtime.openURL(url)
						//#endif
						//#ifndef APP
						window.open(url)
						//#endif
					} else {
						uni.navigateTo({
							url: "/pages/webview/webview?url=" + url
						})
					}
				} else {
					uni.navigateTo({
						url: '/pages/notice/noticeDetails?id=' + id
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.notice-box {
		width: 100%;
		height: 92rpx;

		// background-image: url($IMG_URL + '/static/bg/notice-bg.png');
		// background-size: 100% 100%;
		// background-repeat: no-repeat;
		padding-left: 110rpx;
		padding-right: 30rpx;
	}

	.multiLine {
		width: 100%;
		height: 92rpx;
		border-radius: 0 0 24rpx 24rpx;
		padding: 28rpx 26rpx;
		box-shadow: 0px 2px 4px 0px rgba(213,215,223,0.1);
		box-sizing: border-box;
		
		.text-gg {
			width: 52rpx;
			height: 38rpx;
			background: #1B52F8;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: Source Han Sans CN VF, Source Han Sans CN VF;
			font-weight: 400;
			font-size: 20rpx;
			color: #FFFFFF;
		}

		.notice_img {
			width: 84rpx;
			height: 188rpx;
		}

		.swiper {
			width: calc(100% - (84rpx + 32rpx));
			height: 168.82rpx;
			// border-top-left-radius: 24rpx;
			overflow: hidden;
		}

		.notice-item {
			width: 240rpx;
			height: 168.82rpx;
			background-image: url($IMG_URL + '/static/bg/notice-item-bg.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.notice-type-bg {
				width: 100%;
				height: 126rpx;
				border-radius: 24rpx 24rpx 0rpx 0rpx;

				.notice-typebg {
					width: 100%;
					height: 100%;
					border-radius: 24rpx 24rpx 0rpx 0rpx;
				}
			}

			.notice-text {
				width: 100%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #000;
				min-width: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
	}
</style>